<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_全屏遮罩</title>
    <style>
        .mask{
            position: fixed;
            background-color: rgba(0,0,0,0.3);
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div class="mask"></div>
<div class="main">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur consectetur, culpa delectus magni quas
        quidem quos reprehenderit tenetur. Beatae blanditiis dicta eligendi hic laboriosam molestiae porro quaerat quam
        sed soluta.
    </div>
    <div>Fugit in inventore ipsam itaque molestiae natus odit rem repellat sapiente tempore? Adipisci, incidunt sed.
        Aliquam asperiores aspernatur delectus dolorum est ipsum itaque, modi molestiae omnis quas quis unde vero.
    </div>
    <div>Accusantium ad commodi eius in iusto natus officia placeat temporibus. Aliquam aspernatur dolorum eius incidunt
        laudantium magni natus nulla odit, optio perspiciatis possimus quidem saepe, sed sequi soluta vero voluptatibus.
    </div>
    <div>Amet aspernatur consequuntur cumque debitis dignissimos doloribus eaque eos ipsam labore magnam nostrum
        obcaecati perferendis quibusdam quis, repudiandae veritatis voluptatibus. Earum illum ipsum itaque minima
        nostrum repellat velit veniam. Accusamus.
    </div>
    <div>Consectetur ducimus enim, harum incidunt laboriosam laborum nisi nulla officia optio, pariatur praesentium quos
        temporibus vel? A, accusantium beatae hic incidunt iusto, laboriosam quisquam sint soluta tempora veritatis vero
        voluptates.
    </div>
    <div>Alias, beatae cum delectus dicta dignissimos dolores enim expedita, facere ipsam maxime molestiae, molestias
        nesciunt nulla odio pariatur possimus quasi recusandae repellendus ut velit. Ad aut cumque dolore ipsum
        sapiente!
    </div>
    <div>Ad alias, atque distinctio doloribus ea eius error eveniet exercitationem in iure modi neque nostrum porro quod
        reprehenderit, sapiente, sed totam unde vel voluptatibus. Blanditiis cumque magni minus sequi veniam.
    </div>
    <div>Harum magni maxime sequi. Dolorem eveniet ex fugit quam rem tempore voluptatibus. Alias architecto aspernatur
        atque cumque dolorum ducimus exercitationem expedita laboriosam magnam odit provident quia quibusdam quis,
        ratione voluptatibus.
    </div>
    <div>Animi culpa distinctio enim, explicabo minima minus quam. Aliquam at aut autem consectetur dicta, ducimus est
        eum excepturi fugiat illo, laboriosam maxime nesciunt nobis, omnis recusandae sequi tenetur ut velit.
    </div>
    <div>Aut consequatur corporis debitis deleniti dignissimos dolore dolorum eveniet exercitationem id illo, illum,
        incidunt inventore ipsum iure magni maiores necessitatibus nulla pariatur perferendis perspiciatis placeat
        provident quam quod suscipit, veritatis.
    </div>
    <div>Aperiam consequatur deserunt dignissimos eius facilis, impedit ipsam ipsum itaque iure iusto modi nemo nesciunt
        nihil obcaecati perspiciatis placeat provident quasi quibusdam reiciendis repellat repellendus sapiente tempore
        tenetur vitae voluptates.
    </div>
    <div>Amet doloribus hic iste libero magnam mollitia non nostrum, praesentium quis ratione similique temporibus ut
        veniam! Deserunt doloremque eveniet explicabo magnam suscipit vero voluptates? Eum in praesentium voluptate.
        Odit, veritatis!
    </div>
    <div>Accusantium aliquid assumenda atque consequatur, consequuntur culpa dicta eos est facere facilis impedit
        incidunt ipsam iusto laborum minima natus nulla odio possimus provident repudiandae, sed sunt totam vel veniam
        voluptas!
    </div>
    <div>Dolore explicabo ipsam necessitatibus quos ullam? Dolorem sequi sint vero? Alias cum cumque, doloribus fuga
        pariatur qui ut veniam voluptate. Corporis dolore ea illum magni nisi nulla odio similique ut.
    </div>
    <div>Earum enim iure tempora tenetur. Eos facere facilis illo, neque pariatur praesentium tempora unde? Ab dolorum
        ea eaque itaque natus. Autem dignissimos dolorum eius iusto nemo, pariatur quo saepe voluptatem.
    </div>
    <div>Architecto cupiditate distinctio dolorum eaque ipsum iste iusto, laborum modi perspiciatis quam sint, sit
        tempora ut! Ad, amet animi aspernatur atque aut dolorum earum, ipsum natus quae quidem similique ullam.
    </div>
    <div>Atque minima numquam omnis quibusdam. Consectetur facilis necessitatibus quos vitae? Aliquam atque corporis
        deserunt ea enim, est, et expedita harum iusto magni, quas quibusdam recusandae reiciendis soluta voluptate!
        Eius, laborum.
    </div>
    <div>Autem dolor facilis itaque magni nulla odio praesentium quae quas soluta voluptatibus. Aliquam asperiores atque
        autem beatae cumque dicta distinctio dolor fuga, laboriosam magni perferendis qui quo saepe sint tempore?
    </div>
    <div>Accusamus asperiores at consectetur cumque et exercitationem fugit illo impedit inventore ipsum labore minima,
        nemo nihil omnis, possimus praesentium quas quidem quisquam repellat rerum sapiente similique, tenetur ullam
        vero voluptate.
    </div>
    <div>Accusantium, ad animi assumenda commodi facilis hic incidunt ipsa iste iure, porro quibusdam velit veniam,
        vitae voluptate voluptatum! Accusantium cumque dolore fugit illo laborum modi nulla quidem quo unde, voluptatum.
    </div>
    <div>A ab accusantium ad animi assumenda beatae consequuntur culpa debitis, eligendi impedit magnam nihil nostrum
        obcaecati officia officiis qui ratione repellendus, tempora. A esse fuga illum in quam! Ipsam, officia?
    </div>
    <div>Ad aliquam aspernatur culpa cumque cupiditate debitis distinctio dolor dolores error eum fuga harum illo, ipsa
        laborum maiores neque non officiis pariatur quo quod, ratione tempore vel velit veniam veritatis?
    </div>
    <div>A assumenda autem ex fuga nihil non quaerat repellat similique ut velit? Accusantium alias aperiam asperiores
        atque dignissimos eaque, iusto odio possimus quis ratione repellendus, sit tempora, vitae. At, illo?
    </div>
    <div>Dolorum ea eos, hic ipsum iste laborum maiores neque nisi nobis omnis quidem quod velit? Ab ad aut ea ex
        excepturi expedita fugit hic, itaque pariatur quis, sed similique temporibus.
    </div>
    <div>Cupiditate deserunt impedit laborum laudantium quia. Accusantium consectetur eligendi, fuga fugiat, illum
        impedit iste, modi obcaecati pariatur sint sit voluptatem. Explicabo facere illo ipsam labore obcaecati! Beatae
        dolores fugiat odio.
    </div>
    <div>Ad at, fugit incidunt maiores nostrum quaerat! Architecto consectetur consequatur, cumque cupiditate eos et
        ipsam maxime mollitia necessitatibus nemo porro quas quisquam reprehenderit sunt ut. In iusto magnam officiis
        reiciendis?
    </div>
    <div>Alias error fuga iusto laborum quis quo repellendus repudiandae sint temporibus voluptas! Commodi deleniti
        distinctio excepturi fugiat iure molestias placeat, quam quos! Aspernatur dolor necessitatibus quo repellendus
        ullam ut veritatis.
    </div>
    <div>Adipisci eius nostrum velit. Commodi fugit nesciunt quaerat sequi? Asperiores at autem commodi cumque delectus
        enim fugit in ipsam iste iusto modi, mollitia nam quasi quisquam reprehenderit rerum sequi sunt?
    </div>
    <div>Aperiam consectetur culpa distinctio eaque eum illo impedit ipsa iure iusto laboriosam magnam molestiae nemo
        nostrum nulla perferendis porro, quam quod sapiente sint vero? Asperiores cum minus numquam officiis saepe?
    </div>
    <div>Atque iure minima reprehenderit voluptate. Dolor eos maxime nemo nesciunt recusandae, sapiente suscipit?
        Blanditiis cupiditate deserunt enim facilis iste, natus porro quod. Deleniti eum ex molestias neque nisi
        pariatur quos!
    </div>
    <div>Accusantium aliquid animi at atque consectetur, consequatur debitis ea eum fugit illo inventore laudantium
        magnam minus nam nostrum officia quae repellat repellendus, rerum voluptates. Adipisci error itaque iure nulla
        sit!
    </div>
    <div>Ad dolores in magni porro reprehenderit? Adipisci at consequuntur cupiditate debitis dicta ea eligendi eveniet,
        excepturi harum, illo, nam nihil nostrum perspiciatis quo reprehenderit tempore ullam vel veniam vero
        voluptates!
    </div>
    <div>Animi assumenda corporis et ex, facere iste, minima nostrum officiis pariatur perferendis provident quidem rem
        repellat sunt voluptates. Dicta dolor eius harum quae quis saepe. Corporis perspiciatis placeat quidem quod.
    </div>
    <div>Aliquam distinctio dolorem eligendi fugit impedit labore libero magni quia quos repellat, sapiente, temporibus.
        Corporis debitis dignissimos dolore eligendi, enim, ex illum libero nesciunt quo sequi tenetur ut veritatis
        voluptate.
    </div>
    <div>A accusamus ad animi blanditiis, consequuntur cum distinctio doloremque dolorum earum eius et eveniet impedit,
        magni maiores molestias mollitia nam natus odio officia officiis optio quas quo rem repudiandae voluptate!
    </div>
    <div>Atque corporis doloribus ex quis rem similique sit veniam vitae! Asperiores earum eos eum excepturi facere
        facilis fuga harum ipsam molestiae, nam, necessitatibus nisi non quam qui quos sapiente veniam.
    </div>
    <div>Ab consequatur, delectus fuga fugit in iure numquam odit officiis provident ratione sapiente sint velit! Ab
        animi consequatur consequuntur laudantium, nam officia, perspiciatis possimus quibusdam quis quod reiciendis
        sint veritatis?
    </div>
    <div>Amet aperiam blanditiis deserunt dolore eum expedita facere illo ipsum laboriosam laudantium modi, neque nisi
        numquam odit quidem vitae voluptate? Alias animi debitis delectus facilis, illo impedit pariatur repellendus
        soluta.
    </div>
    <div>Accusantium aliquam commodi culpa magnam maiores nihil omnis quaerat reiciendis! Asperiores cum ducimus error
        est facere facilis, inventore ipsa mollitia nam nostrum quasi rerum tempora voluptatibus. Explicabo nobis
        ratione unde.
    </div>
    <div>Autem blanditiis consequuntur dolores, eligendi eveniet incidunt minima perspiciatis praesentium, quasi quis
        repudiandae sit soluta suscipit totam veniam, voluptate voluptates. Amet aperiam aut deleniti nemo, optio
        reiciendis similique. Fuga, veniam.
    </div>
    <div>Deserunt est facilis hic veniam! Assumenda deserunt dignissimos dolor, dolore dolorem fugiat in quia quo
        reprehenderit. Aliquid asperiores aspernatur dolor exercitationem inventore, laboriosam magnam magni maxime
        minima possimus voluptas voluptates?
    </div>
    <div>Aliquam aspernatur blanditiis, deserunt eius eos esse est fugit ipsam iusto laborum magnam maxime mollitia
        natus nulla numquam perspiciatis placeat, qui quibusdam quos repellat saepe sequi soluta ullam velit vitae.
    </div>
    <div>Accusamus ad adipisci aliquam debitis dicta dolores, earum eligendi eos eum ex harum ipsum labore magnam minus
        molestias natus nostrum officiis porro quisquam ratione sed vero vitae voluptas voluptatibus voluptatum.
    </div>
    <div>Aperiam autem commodi ducimus ea facere hic id impedit, ipsam nostrum, odit optio, pariatur perspiciatis
        quibusdam quo voluptatem! Ab cupiditate delectus, dolore modi neque nobis quae qui rerum tenetur veniam!
    </div>
    <div>Assumenda deleniti ea excepturi maiores neque repellendus voluptatibus? Ab accusamus eaque nobis porro quos!
        Animi aperiam, aspernatur esse fuga mollitia neque non quas quod repudiandae sunt suscipit unde ut voluptatibus!
    </div>
    <div>Adipisci architecto asperiores consectetur dignissimos dolore dolores ducimus esse eum eveniet expedita illum
        laboriosam libero mollitia nisi officiis placeat provident qui ratione, rem sunt suscipit temporibus, ullam vero
        vitae voluptatibus!
    </div>
    <div>Aliquid amet animi cupiditate dicta dignissimos distinctio doloremque eos esse, facere id laudantium magni
        nostrum quaerat quasi qui quidem reprehenderit rerum sapiente sequi tempora totam ullam velit, veritatis
        voluptates voluptatibus!
    </div>
    <div>Ad at consectetur, dolores ex harum inventore modi placeat, reprehenderit repudiandae, similique suscipit
        voluptas. Cupiditate dolor hic id molestiae nobis non pariatur quidem quod reprehenderit, similique! Fugiat
        illum necessitatibus repellendus.
    </div>
    <div>A deleniti ducimus ex, inventore itaque numquam perspiciatis rem voluptate! Debitis incidunt nihil nisi nobis
        nostrum numquam odio placeat provident quisquam. Accusamus consequatur consequuntur dolorum minus molestias nemo
        similique ullam?
    </div>
    <div>Accusantium aliquid aspernatur consequuntur cum, debitis distinctio doloremque, enim expedita explicabo id illo
        ipsam laboriosam maiores neque nihil officia officiis placeat possimus praesentium quidem quo quod rem
        repellendus repudiandae vero!
    </div>
    <div>Assumenda autem cupiditate debitis deleniti dolorem error esse excepturi facere fugit iure magnam modi qui,
        recusandae. Ab asperiores cum dolor doloremque, enim est id iste iusto libero praesentium sequi velit!
    </div>
    <div>Consequuntur cum dicta earum itaque neque nobis pariatur quaerat qui sequi velit? Aperiam assumenda consequatur
        cum hic, ipsa laudantium magni nulla tempore? Aperiam corporis deleniti est magnam quo repellendus vitae!
    </div>
    <div>A, accusamus architecto at dignissimos eos ex explicabo facere hic incidunt laborum magnam modi nesciunt
        numquam sed sequi similique, sit. Aliquam eligendi est expedita facere iure magnam molestias sed sit!
    </div>
    <div>Amet cupiditate impedit laudantium maiores mollitia natus non quaerat recusandae sapiente sed. Assumenda
        deleniti earum eos fugiat in incidunt nobis nostrum suscipit, totam ullam veritatis voluptas voluptate. Facere
        incidunt, ipsam!
    </div>
    <div>A animi aspernatur atque blanditiis, consequatur delectus dicta dolor dolores eligendi enim eos excepturi
        explicabo nulla, officiis perferendis, quasi quod repellat reprehenderit rerum sed sit soluta unde ut veniam
        vitae.
    </div>
    <div>A accusantium aspernatur eos impedit laudantium molestias reiciendis rerum sequi totam voluptates. Corporis
        doloremque eaque eligendi eos ipsum labore laudantium, nam praesentium provident tempore? Consectetur distinctio
        ipsum repellat ullam vel!
    </div>
    <div>Accusamus animi assumenda consequatur dolore eum fuga fugiat incidunt, inventore ipsum, laudantium modi, odit
        praesentium quis rerum saepe sequi voluptatem! Alias aut commodi consectetur earum eveniet nemo perferendis quam
        suscipit?
    </div>
    <div>Aliquid amet aperiam assumenda at blanditiis dicta eligendi ipsa iure, perspiciatis quaerat quisquam reiciendis
        repudiandae rerum tenetur totam ut voluptas voluptatum. Assumenda error eum hic necessitatibus odio provident
        quia voluptatibus!
    </div>
    <div>Ab earum eius eveniet facilis mollitia nesciunt provident quis! Accusamus asperiores cumque earum expedita iste
        natus possimus quaerat sunt totam vero! Ad adipisci cupiditate id minima nisi reiciendis tempora vel.
    </div>
    <div>A dignissimos distinctio esse et inventore itaque mollitia nam neque officiis pariatur quae, quasi repellendus
        ut vel voluptatum. Amet aperiam dolor est fuga omnis pariatur porro praesentium quas totam vero.
    </div>
</div>

</body>
</html>